<template>
  <div id="heatmap" style="width:100%; height: 466px;">
    <img :src="img_src" style="width:100%; height: 100%">
  </div>
</template>

<script>
import Heatmap from 'heatmap.js'
export default {
  name: 'Heatmap',
  props: ['img_src', 'data_source'],
  data() {
    return {
      frame_width: 0,
      frame_height: 0
    }
  },
  mounted() {
    this.frame_width = document.getElementById('heatmap').clientWidth
    this.frame_height = document.getElementById('heatmap').clientHeight
  },

  methods: {
    repaint_heatmap(new_data_source) {
      const map = document.getElementById('heatmap')
      if (map.childNodes[1]) {
        map.removeChild(map.childNodes[1])
      }
      var heatmapInstance = Heatmap.create({
        container: document.querySelector('#heatmap')
      })
      // 构建数据点
      var points = []
      var max = 0
      // console.log(this.data_source)
      var width = this.frame_width * 0.35
      var height = this.frame_height * 0.25
      console.log(width, height)
      var len = new_data_source.each_board_info.length
      const each_board_info = new_data_source.each_board_info
      while (len--) {
        // console.log(each_board_info[len].board_total)
        var val = each_board_info[len].board_total
        max = Math.max(max, val)
        const location = each_board_info[len].board.split('-', 3)
        const location_x = Number(location[1])
        const location_y = Number(location[2])
        // console.log(location)
        var point = {
          x: Math.floor(location_x / 9 * width + width * 0.225),
          y: Math.floor(location_y / 4 * height + height * 0.086),
          value: val
        }
        // console.log(width,height)
        // console.log(location_x,location_y,point)
        points.push(point)
      }
      var data = {
        max: 1500,
        data: points
      }
      // 因为data是一组数据,web切图报价所以直接setData
      heatmapInstance.setData(data)
    }
  }
}
</script>

<style lang="scss" scoped>
.heatmap{
  height: 400px;
  width:700px;
}
</style>
